import React, { Component } from 'react';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { Card, Col, Row, Typography } from 'antd';
import Donut from '@/pages/Index/donut';
import Pieplatelets from '@/pages/Index/pieplatelets';
import Labelline from '@/pages/Index/labelline';
import Pie from '@/pages/Index/pie';
import Pieslice from '@/pages/Index/pieslice';

@connect(
  state => ({
    dataqueryHomeCount: state.index.dataqueryHomeCount,
    loadingqueryHomeCount: state.loading.effects['index/queryHomeCount'],
  }),
  dispatch => ({
    queryHomeCount: e => dispatch({ type: 'index/queryHomeCount', payload: e }),
  })
)
class Index extends Component {
  componentDidMount() {
    this.props.queryHomeCount();
  }
  render() {
    return (
      <PageHeaderWrapper title="首页">
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <Card>
              <Row type="flex" justify="space-between" align="middle">
                <Col>数据库总数</Col>
                <Col>
                  <Typography.Title level={3} style={{ marginBottom: 0 }}>
                    {this.props.dataqueryHomeCount.dbCount}
                  </Typography.Title>
                </Col>
              </Row>
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Row type="flex" justify="space-between" align="middle">
                <Col>表总数</Col>
                <Col>
                  <Typography.Title level={3} style={{ marginBottom: 0 }}>
                    {this.props.dataqueryHomeCount.tableCount}
                  </Typography.Title>
                </Col>
              </Row>
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Row type="flex" justify="space-between" align="middle">
                <Col>识别字段总数</Col>
                <Col>
                  <Typography.Title level={3} style={{ marginBottom: 0 }}>
                    {this.props.dataqueryHomeCount.columnCount}
                  </Typography.Title>
                </Col>
              </Row>
            </Card>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <Card title="数据库数量">
              <Donut data={this.props.dataqueryHomeCount.dbList} />
            </Card>
          </Col>
          <Col span={12}>
            <Card title="敏感信息表与不敏感信息表占比">
              <Pie data={this.props.dataqueryHomeCount.leList} />
            </Card>
          </Col>          
        </Row>
        <Row gutter={[16, 16]}>
        <Col span={12}>
            <Card title="敏感表占比">
              <Pieslice data={this.props.dataqueryHomeCount.leTypeList} />
            </Card>
          </Col>
          {/* <Col span={12}>
            <Card title="不同维度的汇总">
              <Pieplatelets data={this.props.dataqueryHomeCount.dbinfoTypeList} />
            </Card>
          </Col> */}
          <Col span={12}>
            <Card title="敏感信息汇总">
              <Labelline data={this.props.dataqueryHomeCount.leWordeList}/>
            </Card>
          </Col>
        </Row>

        {/*大家好，我是首页。你们进来先看到我*/}
      </PageHeaderWrapper>
    );
  }
}

export default Index;
